<template>
  <section class="my-container mt-16">
    <aside class="flex justify-between mb-7">
      <h3 class="border-l-4 border-l-primary pl-5 text-3xl">超低日租金</h3>
      <p
        class="cursor-pointer transition-colors text-xl text-gray-400 hover:text-gray-700"
        @click="$router.push('/car-rental/' + carId)"
        >查看更多</p
      >
    </aside>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card
          class="my-2 cursor-pointer hover:-translate-y-1"
          shadow="hover"
          :body-style="{ height: '327px', padding: '0' }"
        >
          <el-image class="w-full h-full" :src="require('./images/index-left-1.png')" fit="cover" :lazy="true" />
        </el-card>
      </el-col>
      <CarCard v-for="type in typeList.slice(0, 3)" :key="type._id" :car="type" />
    </el-row>
  </section>
</template>

<script>
  export default {
    name: 'HomeRecommend',
    data() {
      return {}
    },
    computed: {
      ...mapState('category', ['carId']),
      ...mapState('type', ['typeList']),
    },
    mounted() {
      this.getCardId()
      this.getType(this.carId)
    },
    methods: {
      ...mapActions('category', ['getCardId']),
      ...mapActions('type', ['getType']),
    },
  }
</script>

<style scoped></style>
